/**
 * @developer：MR·Feng
 * 头部
 */

import styles from '@/styles/common/header.less';
import logo from '@/images/logo/logo980.png';

import { withRouter, Link } from 'umi';
import { Menu, Dropdown } from 'antd';
import cookie from 'react-cookies';
import React, { useState, useEffect } from 'react';

function Header() {
    const [userinfo, setuserinfo] = useState({
        user: '',
    });

    // 副作用操作
    useEffect(() => {
        setuserinfo(cookie.load('userInfo'));

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const menu = (
        <Menu>
            <Menu.Item>
                <a onClick={(e) => e.preventDefault()}>个人中心</a>
            </Menu.Item>
            <Menu.Item danger>退出</Menu.Item>
        </Menu>
    );
    return (
        <header className={styles.headers}>
            <dl>
                <dt>
                    <Link to="/home">
                        <img src={logo} alt="" />
                    </Link>
                </dt>
                <dd>
                    <span>云账号</span>
                    <span>
                        <Dropdown overlay={menu} placement="bottomLeft" arrow>
                            <a onClick={(e) => e.preventDefault()}>
                                {userinfo && userinfo.user
                                    ? userinfo.user
                                    : null}
                            </a>
                        </Dropdown>
                    </span>
                </dd>
            </dl>
        </header>
    );
}

export default withRouter(Header);
